<template>
  <div class="full">
    <el-row style="padding: 20px 40px" class="fun-menu">
      <div  @click="inputPaperName">
        <menu-block header="创建考试" des="可选择创建新试卷，或从试卷库中选择一张试卷考试" :src="require('../../assets/images/create_tests.svg')"/>
      </div>
      <div @click="toAddQues">
        <menu-block header="添加试题" des="手动录入或批量录入试题，完善您的试题库"
                    :src="require('../../assets/images/add_test_questions.svg')"/>
      </div>
    </el-row>
    <el-row>
      <el-col align="left" class="font-lg" style="padding-left: 40px">
        正在进行的考试 ({{contest.length}})
      </el-col>
    </el-row>
    <el-row style="padding: 0px 20px">
      <float-container style="width: 300px;margin: 20px;padding:10px 20px" class="fl context shadow-base" v-for="item in contest">
        <el-row>
          <el-col align="left" :span="16">
            <span class="text-bold font-md text-color-normal">{{item.name}}</span>
          </el-col>
          <el-col :span="8" class="operate">
            <el-dropdown>
              <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item ><div @click="toContest(item.id)">考一下</div></el-dropdown-item>
                <el-dropdown-item><div @click="shareLink(item.id)">分享链接</div></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            {{item.gmtStart}} 至 {{item.gmtEnd}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            分数:{{item.sumScore}}
          </el-col>
          <el-col :span="8">
            方式:任意考试
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            类型:抽提组卷
          </el-col>
          <el-col :span="8">
            时长:{{(new Date('0000-01-01 ' + item.timeLen).getTime() - new Date("0000-01-01 00:00:00").getTime())/ 60000}}分钟
          </el-col>
          <el-col :span="8">
            <span class="text-brand">0人</span>正在考试
          </el-col>
        </el-row>
      </float-container>
    </el-row>
    <add-paper-dialog width="30%" />
    <el-dialog :visible="visible" @close="visible = false">
      <el-row>
        <el-col>
          <el-input readonly v-model="path" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import MenuBlock from './MenuBlock'
import FloatContainer from '../../Common/FloatContainer'
import AddPaperDialog from '../Paper/addPaper/AddPaperDialog'
import api from '@/api'
import ElBottomButtonDialog from '../../Common/ElBottomButtonDialog'

export default {
  name: 'index',
  data () {
    return {
      contest: [],
      path: '',
      visible: false
    }
  },
  mounted () {
    api.getCurrentContests(6)
      .then(api.commonResp((success, data) => {
        if (success) {
          this.contest = data
        } else {
          this.$message.error(data)
        }
      }))
  },
  components: {
    ElBottomButtonDialog,
    MenuBlock,
    FloatContainer,
    AddPaperDialog
  },
  methods: {
    toContest (id) {
      this.$router.push({ name: 'contesting', params: { id } })
    },
    shareLink (id) {
      let base = window.location.href.replace(location.pathname, '')
      let path = base + ('/contesting/' + id)
      this.path = path
      this.visible = true
    },
    toAddQues () {
      this.$router.push({ name: 'addQues' })
    },
    inputPaperName () {
      this.$bus.$emit('show-add-paper-dialog')
    }
  }
}
</script>

<style scoped lang="less">
  @import "../../assets/css/common.less";
  .float-container.context{
    position: relative;
    &:before{
      top: 15px;
      left: 0;
      content: '';
      display: block;
      position: absolute;
      height: 20px;
      border: 5px transparent solid;
      border-left: 5px @brand solid;
      border-radius: 1px;
    }
    margin: 10px 0;
    .el-row:first-of-type{
      .operate{
        .text-right;
      }
    }
    .el-row{
      margin: 8px 0;
      .el-col{
        .font-sm;
        .text-info;
        .text-left;
      }
    }
  }

  .fun-menu{
    div{
      float: left;
      margin-right: 20px;
    }
  }
</style>
